<template>
  <div class="gva-table-box">
    <div class="gva-btn-list search-form" style="padding-top: 80px;">
      <el-form ref="formRef" :model="OrderInfo" style="width: 100%;">
        <el-row :gutter="20" class="flex">
          <el-col :span="5">
            <el-form-item label="系统单号" prop="global_order_no">
              <el-input clearable v-model="OrderInfo.global_order_no" placeholder="系统单号" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="平台单号" prop="platform_order_no">
              <el-input clearable v-model="OrderInfo.platform_order_no" placeholder="系统单号" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态" prop="status">
              <el-select clearable v-model="OrderInfo.status"  placeholder="选择状态">
                <el-option value="3" label="待付款" />
                <el-option value="4" label="待审核" />
                <el-option value="5" label="待发货" />
                <el-option value="6" label="已发货" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="仓库" prop="wid">
              <el-select clearable filterable v-model="OrderInfo.wid" style="width: 100%" placeholder="仓库">
                <el-option
                  v-for="option in wareList"
                  :key="option.wid"
                  :value="option.wid"
                  :label="option.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="是否超时发货" prop="is_overdue">
              <el-select clearable v-model="OrderInfo.is_overdue" placeholder="是否超时">
                <el-option value="1" label="是" />
                <el-option value="0" label="否" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-button type="primary" icon="Search" class="action" style="margin-left: 20px;"
                @click="getsearch">搜索</el-button>
              <el-button class="action reset" @click="resetForm()">重置搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <div>
        <el-table :data="dataList" row-key="ID" 
        :row-class-name="tableRowClassName"
        v-loading="loading"
        style="height: 480px;"

        >
          <el-table-column align="center" label="序" min-width="75">
            <template #default="scope">
              <span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="系统单号" min-width="200" prop="global_order_no" />
          <el-table-column align="center" label="平台单号" min-width="200" prop="platform_order_no" />
          <el-table-column align="center" label="平台名称" min-width="120" prop="platform_code">
            <template #default="scope">
              {{platform_arr[scope.row.platform_code]}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="币种" prop="amount_currency" />
          <el-table-column align="center" label="店铺名称" min-width="160" prop="store_name" />
          <el-table-column align="center" label="物流商" min-width="200" prop="logistics_provider_name" >
            <template #default="scope">

            {{scope.row.logistics_provider_name!='0'?scope.row.logistics_provider_name:''}}
          </template>

          </el-table-column>
          <el-table-column align="center" label="运单号" min-width="200" prop="waybill_no">
            <template #default="scope">
            <span style="color:#005BF5;cursor:pointer" @click="handleModal(scope.row.waybill_no)" >{{scope.row.waybill_no!='0'?scope.row.waybill_no:''}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="仓库"  prop="wid">
            <template #default="scope">
              {{getwarehouse(scope.row.wid)}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" prop="status">
            <template #default="scope">
              {{handleStatus(scope.row.status)}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="发货方式" prop="delivery_type">
            <template #default="scope">
              {{handledelivery_type(scope.row.delivery_type)}}
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="订单更新时间" min-width="200" prop="update_time">
            <template #default="scope">
              {{gettime(scope.row.update_time)}}
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="订购时间" min-width="200" prop="global_purchase_time" >
            <template #default="scope">
              {{gettime(scope.row.global_purchase_time)}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="发货时间" min-width="200" prop="global_delivery_time" >
            <template #default="scope">
              {{gettime(scope.row.global_delivery_time)}}
            </template>
          </el-table-column>

          <el-table-column align="center" fixed="right" label="发货时限" min-width="200" prop="global_latest_ship_time" >
            <template #default="scope">
              <div :class="[scope.row.is_overdue?'red':'']">{{gettime(scope.row.global_latest_ship_time)}}</div>
            </template>
          </el-table-column>

        </el-table>
        <div class="gva-pagination">
          <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :total="total"
            :page-sizes="[10, 20, 30, 40]" layout="prev, pager, next, jumper, total, sizes"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
    <el-dialog v-model="trackVisible"  width="600px" center>
    <iframe
      :src="iframeUrl"
      style="width: 100%; height: 520px;">
    </iframe>
    </el-dialog>
  </div>

</template>

<script setup>
import { ref, reactive,watch } from 'vue'
import { getOrderList,getwarehouselist } from '@/api/orderlimit'
import { useRoute, useRouter } from 'vue-router'
import {showLoading,closeLoading } from '@/utils/common'

defineOptions({
  name: 'LxOrder'
})

const route = useRoute()
const router = useRouter()
// 获取商品列表
const dataList = ref([])
const wareList = ref([])
const wareSearch = reactive([])
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const iframeUrl = ref('');
const trackVisible = ref(false)
const query = route.query
const loading = ref(false)  
const OrderInfo = reactive({
  platform_order_no: '',
  global_order_no : '',
  wid:'',
  is_overdue:query.is_overdue?query.is_overdue:'',
  status:query.status?query.status:'',
})
const handleModal  = (waybill_no)=>{
  iframeUrl.value = 'https://www.track123.com/iframe/home?trackNos='+waybill_no;
  trackVisible.value = !trackVisible.value
}
const getWareData = async () => {
  const res = await getwarehouselist()
  if (res.errcode === 0) {
    wareList.value = res.content;
    wareList.value.forEach(element => {
      wareSearch[element.wid] = element.name
    });
getOrderData(OrderInfo)

  }
}
getWareData()
const handleStatus = (Status) => {
  switch (Status) {
    case '1':
      return '同步中'
      break
    case '2':
      return '已同步'
      break
    case '3':
      return '未付款'
      break
    case '4':
      return '待审核'
      break
    case '5':
      return '待发货'
      break
    case '6':
      return '已发货'
      break
      case '7':
      return '已取消'
      break
      case '8':
      return '不显示'
      break
      case '9':
      return '平台发货'
      break
    default:
      return ''
  }
}
const handledelivery_type = (Status) => {
  switch (Status) {
    case '1':
      return '混合方式'
      break
    case '2':
      return '自发货'
      break
    case '3':
      return '平台发货'
      break
    default:
      return ''
  }
}
const platform_arr = {
  '10001':'AMAZON',
  '10002':'Shopify',
  '10003':'eBay',
  '10004':'Wish',
  '10005':'AliExpress',
  '10006':'Shopee',
  '10007':'Lazada',
  '10008':'Walmart',
  '10009':'自定义平台',
  '10010':'Wayfair',
  '10011':'TikTok',
  '10012':'MERCADO',
  '10013':'CDISCOUNT',
  '10014':'NEWEGG',
  '10015':'RAKUTEN',
  '10016':'SHOPLINE',
  '10017':'TEAPPLIX',
  '10018':'SHOPLAZZA',
  '10019':'UEESHOP',
  '10020':'COUPANG',
  '10021':'SHEIN',
  '10022':'temu全托管',
  '10024':'temu半托管'
}
const gettime = (shijianchuo)=>
{
  if(!Number(shijianchuo)){
    return '- -';
  }
//shijianchuo是整数，否则要parseInt转换
var time = new Date(Number(shijianchuo*1000));
var y = time.getFullYear();
var m = time.getMonth()+1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
}
function add0(m){return m<10?'0'+m:m }

const getOrderData = async (requestdata) => {
  requestdata.PageIndex = page.value;
  requestdata.PageSize = pageSize.value;
  loading.value = true
  getOrderList(requestdata).then((res) => {
    loading.value = false

    if (res.errcode == 0) {
      dataList.value = res.content
      total.value = Number(res.totalRecords)
    }
  });
}
const getwarehouse = (wid)=>{
  if(wareList[wid]){
    return wareList[wid]
  }else{
    return ''
  }
}
const getsearch = async () => {
  page.value = 1;

  getOrderData(OrderInfo)
}

const handleCurrentChange = (num) => {
  page.value = num
  getOrderData(OrderInfo)
}

const handleSizeChange = (num) => {
  pageSize.value = num
  getOrderData(OrderInfo)
}
const formRef = ref();
const resetForm = ()=>{
  formRef.value.resetFields();
// OrderInfo.platform_order_no = '';
// OrderInfo.global_order_no = '';
// OrderInfo.wid = '';
getOrderData(OrderInfo)

}
const tableRowClassName=({row, rowIndex}) =>{
      // 通过rowIndex判断奇偶行，添加不同的类名
      if (rowIndex % 2 === 0) {
        return 'even-row';
      } else {
        return 'odd-row';
      }
    }
</script>

<style lang="scss" scoped>
.balanceTitle{
  font-size: 20px;
  margin-bottom: 20px
}
.activetitle{
  color: red;
  margin-left:12px
}
.red{
  color: red
}
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.gva-table-box {
  margin: 20px;
}

:deep(.el-input__inner) {
  font-size: 12px !important;
  color: rgba(0, 0, 0, .85) !important;

}

:deep(.el-select__wrapper) {
  font-size: 12px !important;

  .el-select__selected-item {
    font-size: 12px !important;
  }

}

.logo-img {
  width: 46px;
}
</style>

<style lang="scss">
:deep(.el-form-item) {
  align-content: center;
}
</style>
